<script setup lang="ts">
// Props定义
interface Props {
  // 按钮文本
  buttonText?: string
  // 按钮类型（primary/success/warning/error）
  buttonType?: 'primary' | 'success' | 'warning' | 'error'
  // 是否禁用
  disabled?: boolean
  // 加载状态文本
  loadingText?: string
  // 是否处于加载状态
  loading?: boolean
  // 按钮大小
  buttonSize?: 'medium' | 'small' | 'large'
}

const props = withDefaults(defineProps<Props>(), {
  buttonText: '提交',
  buttonType: 'primary',
  disabled: false,
  loadingText: '处理中...',
  loading: false,
  buttonSize: 'large',
})

// Emits定义
const emit = defineEmits<{
  (e: 'confirm'): void
}>()

// 处理确认按钮点击事件
function handleConfirm() {
  // 如果禁用或加载中，则不触发点击事件
  if (props.disabled || props.loading) {
    return
  }

  emit('confirm')
}
</script>

<template>
  <!-- 占位元素，确保底部有足够的空间 -->
  <view class="h-25" />
  <view class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white p-5">
    <WdButton
      class="w-full"
      :size="buttonSize"
      :type="buttonType"
      :disabled="disabled || loading"
      :loading="loading"
      @click="handleConfirm"
    >
      {{ buttonText }}
    </WdButton>
  </view>
</template>
